<template>
  <div>
    <div class="kylin-form">
      <el-row>
        <el-col :span="24">
          <span class="select_all">{{ $t("user.is_select_all") }}</span>
          <el-checkbox v-model="checked" @change="handleChange">{{
            this.$t("user.select_all")
          }}</el-checkbox>
          <el-input
            class="filter"
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            
          />
        </el-col>
      </el-row>
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-checked-keys="ids"
        :props="defaultProps"
        :filter-node-method="filterNode"
      >
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import { getMenu, setMenu } from "@/api/role";
export default {
  props: {
    rowId: {
      type: Number || String,
      default: "",
    },
  },
  data() {
    return {
      checked: false,
      filterText: "",
      data: [
        {
          id: "host:all",
          label: this.$t("system.system_module"),
          parent: "",
          children: [
            {
              id: "systems",
              label: this.$t("system.systems"),
              parent: this.$t("system.system_module")
            },
            {
              id: "batch",
              label: this.$t("system.host_batch"),
              parent: this.$t("system.system_module")
            },
            {
              id: "scan_setting",
              label: this.$t("system.scan_setting"),
              parent: this.$t("system.system_module")
            },
            {
              id: "system_compare",
              label: this.$t("system.system_compare"),
              parent: this.$t("system.system_module")
            },
            {
              id: "script",
              label: this.$t("system.script"),
              parent: this.$t("system.system_module")
            },
          ],
        },
        {
          id: "configure:all",
          label: this.$t("configure.configure_module"),
          parent: "",
          children: [
            {
              id: "normal_library",
              label: this.$t("configure.normal_library"),
              parent: this.$t("configure.configure_module"),
            },
            {
              id: "configure_item",
              label: this.$t("configure.configure_item_manager"),
              parent: this.$t("configure.configure_module"),
            },
            {
              id: "migrate_compare",
              label: this.$t("configure.migrate_compare"),
              parent: this.$t("configure.configure_module"),
            },
            {
              id: "template_library",
              label: this.$t("configure.template_library"),
              parent: this.$t("configure.configure_module"),
            },
          ],
        },
        {
          id: "patch:all",
          label: this.$t("patch.patch_module"),
          parent: "",
          children: [
            {
              id: "product",
              label: this.$t("patch.product"),
              parent: this.$t("patch.patch_module"),
            },
            {
              id: "packages",
              label: this.$t("system.package_list"),
              parent: this.$t("patch.patch_module"),
            },
            {
              id: "sp_upgrade",
              label: this.$t("patch.sp_upgrade"),
              parent: this.$t("patch.patch_module"),
            },
          ],
        },
        {
          id: "user:all",
          label: this.$t("user.user_module"),
          parent: "",
          children: [
            {
              id: "user",
              label: this.$t("user.user_manager"),
              parent: this.$t("user.user_module"),
            },
            {
              id: "roles",
              label: this.$t("user.role_manager"),
              parent: this.$t("user.user_module"),
            },
            {
              id: "user_operation",
              label: this.$t("user.user_operation"),
              parent: this.$t("user.user_module"),
            },
          ],
        },
        {
          id: "log:all",
          label: this.$t("log.log_module"),
          parent: "",
          children: [
            {
              id: "log",
              label: this.$t("log.log"),
              parent: this.$t("log.log_module")
            },
          ],
        },
      ],
      ids: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
    getMenu({ ids: [this.rowId] }).then((res) => {
      let data = res.data.data;
      if (data.includes("default:all")) {
        this.$refs.tree.setCheckedKeys([
          "host:all",
          "configure:all",
          "patch:all",
          "user:all",
          "log:all",
        ]);
      } else {
        this.$refs.tree.setCheckedKeys(data);
      }
    });
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    handleCancel() {
      this.$emit("click");
    },
    handleOk() {
      setMenu(this.rowId, this.$refs.tree.getCheckedKeys()).then((res) => {
        if (res.data.code === "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$emit("click");
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    handleChange(value) {
      if (value) {
        this.$refs.tree.setCheckedKeys([
          "host:all",
          "configure:all",
          "patch:all",
          "user:all",
          "log:all",
        ]);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1 || data.parent.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.select_all {
  margin-right: 20px;
  margin-left: 6px;
}
.filter {
    width: 50%;
}
</style>